<template>
	<view>
		<view class="tabs u-flex">
			<view class="tab-item" :class="{ active: tabCurrent == 1 }" @click="changeTab(1)">全部</view>
			<view class="tab-item" :class="{ active: tabCurrent == 2 }" @click="changeTab(2)">待付款</view>
			<view class="tab-item" :class="{ active: tabCurrent == 3 }" @click="changeTab(3)">待收货</view>
			<view class="tab-item" :class="{ active: tabCurrent == 4 }" @click="changeTab(4)">已收货</view>
			<view class="tab-item" :class="{ active: tabCurrent == 5 }" @click="changeTab(5)">退款</view>
		</view>
		<view v-show="true" class="no-order u-flex-col">
			<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/af4eb960-abaf-11ea-b43d-2358b31b6ce6.png"></image>
			<view class="tips">目前没有{{ tabName }}订单哦~</view>
		</view>
		<mi-goods-list :dataList="goodsList" :loadMoreBg="loadingBg" :showLoadmore="showLoadmore" :loadMoreStatus="loadingStatus"></mi-goods-list>
	</view>
</template>

<script>
import miGoodsList from '@/components/mi-goods-list.vue'
export default {
	data() {
		return {
			tabCurrent: 1,
			goodsList: [],
			dataOffset: 0,
			showLoadmore: false,
			loadingStatus: 'loadmore',
			loadingBg: '#f7f7f7'
		}
	},
	onLoad(e) {
		if (e.tab) {
			this.tabCurrent = e.tab
		}
		uni.showLoading()
		this.getGoodsList()
	},
	methods: {
		changeTab(e) {
			if (this.tabCurrent == e) return
			this.tabCurrent = e
			this.goodsList = []
			this.dataOffset = 0
			uni.showLoading()
			this.getGoodsList()
		},
		getGoodsList() {
			let data = {
				type:this.tabCurrent,
				limit: 40,
				offset:this.dataOffset
			}
			this.$u.api.getRecommendGoods(data).then(res => {
				res.data.recommendResponseList.forEach(x => {
					this.goodsList.push(x.data.goods)
				})
				this.dataOffset += data.limit
				this.showLoadmore = true
				this.loadingStatus = 'loadmore'
				uni.hideLoading()
			})
		}
	},
	onReachBottom() {
		if (this.dataOffset >= 120) {
			return (this.loadingStatus = 'nomore')
		}
		this.loadingStatus = 'loading'
		this.getGoodsList()
	},
	components: {
		miGoodsList
	},
	computed:{
		tabName(){
			if (this.tabCurrent == 2) {
				return '待付款'
			} else if (this.tabCurrent == 3) {
				return '待收货'
			} else if (this.tabCurrent == 4) {
				return '已收货'
			} else if (this.tabCurrent == 5) {
				return '退款'
			} else {
				return ''
			} 
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
.tabs {
	justify-content: space-around;
	height: 100rpx;
	padding: 0 10rpx;
	.tab-item {
		padding: 2rpx 20rpx;
		border-radius: 32rpx;
		text-align: center;
	}
	.active {
		color: #fff;
		background-image: linear-gradient(to right, #f0cd7a, #deb351);
	}
}
.no-order {
	align-items: center;
	padding: 30rpx 0;
	image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 90rpx;
	}
	.tips {
		color: #777;
		margin-top: 30rpx;
	}
}
</style>
